<template>
  <div class="plugin-mgr">
    <div style="text-align: left;">这里是编辑器已经安装的所有插件列表</div>
    <STable class="tab" :head="head" :data="body">


    </STable>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import STable from '@/ui-kit/table/table.vue';
import { HeadData } from '@/ui-kit/table';
import pluginStore, { PluginsStoreState } from '../../../store/plugins';

interface PluginInfo {
  name: string;
  desc: string;
}

export default defineComponent({
  name: 'plugin-mgr',
  components: { STable },
  emits: [],
  setup(props, { emit }) {
    const head = ref<HeadData[]>([
      { label: '名称', key: 'name' },
      { label: '类型', key: 'type' },
      { label: '描述', key: 'desc' },
    ]);
    const store = pluginStore();
    const body = computed<PluginInfo[]>(() => {
      const state = store.$state as PluginsStoreState;

      const arr1 = store.allBehaviors.map(item => {
        const { name, desc } = item.info;
        return { name, desc, type: item.type };
      });
      const arr2 = state.allObjects.map(item => {
        const { name, desc } = item.info;
        return { name, desc, type: item.type };
      });
      return arr1.concat(arr2);
    });
    return { head, body };
  },
});
</script>
<style scoped lang="scss">
.plugin-mgr {
  display: flex;
  flex-direction: column;

  .tab {
    flex: 1;
  }
}
</style>
